<template>
  <div class="order-layout order-step box-width container" v-if="vehicleCore.model_name">
    <div class="step-layout">
      <div class="item active">
        选择车型
      </div>
      <div class="item active">
        详情订单填写
      </div>
      <div class="item">
        在线支付
      </div>
      <div class="item">
        预订成功
      </div>
    </div>
    <div class="detail" v-if="vehicleCore">
      <div class="clearfix" style="position: relative;">
        <p style="font-size: 18px; font-weight: bold;" v-if="carDetailData.pickupLocation">* {{carDetailData.pickupLocation.airport_location_description ? '门店位于' + carDetailData.pickupLocation.airport_location_description : ''}}{{carDetailData.pickupLocation.airport_location_description ? '，' : ''}}{{carDetailData.pickupLocation.shuttle_service_cn_description}}</p>
        <!-- <i class="iconfont icon-eye" style="font-size: 20px; font-weight: bold;position: absolute; right: 0; top: 5px;"></i> -->
      </div>
      <div class="car-description">
        <div class="img-cover">
          <img :src="vehicleCore.picture">
        </div>
        <div class="description">
          <div class="title">{{vehicleCore.model_name}}</div>
          <div class="subtitle">{{vehicleCore.model_code_class_desc}}/ {{vehicleCore.category_code_desc}}/ {{vehicleCore.transmission_type === 'MANUAL' ? '手动' : '自动'}}/ {{vehicleCore.baggage_quantity}}件行李/ {{vehicleCore.passenger_quantity}}座位/ {{vehicleCore.air_condition_in ? '含空调' : '不含空调'}}/ {{vehicleCore.model_code_type === 'B' ? '2门' : vehicleCore.model_code_type === 'C' ? '2或4门' : '4门或5门'}}</div>
          <div class="price-box">

            <div v-if="carSearch.type === 'PREPAY'">
              <div v-if="!vehicleCore.empty_price2">
                <a href="javascript:void(0);" class="price-item">
                  <div class="title">官方零售价：</div>
                  <div class="price">￥{{Math.ceil(vehiclePrices[vehicleCore.uuid].destination_price)}}.00</div>
                </a>
                <a href="javascript:void(0);" class="price-item">
                  <div class="title">{{rateAmountType.name}}：</div>
                  <div v-if="carDetailData.agent.rate" class="price current-price">￥{{rateAmountType.price.substring(1, rateAmountType.price.length) * (1 + carDetailData.agent.rate * 0.01)}}</div>
                  <div v-if="!carDetailData.agent.rate" class="price current-price">{{rateAmountType.price}}</div>
                </a>
              </div>

              <div v-if="vehicleCore.empty_price2">
                <a href="javascript:void(0);" class="price-item">
                  <div class="title">官方零售价：</div>
                  <div class="price ">￥{{Math.ceil(vehiclePrices[vehicleCore.uuid].destination_price)}}.00</div>
                </a>
                <a href="javascript:void(0);" class="price-item" >
                  <div class="title">{{rateAmountType.name}}：</div>
                  <div v-if="carDetailData.agent.rate" class="price current-price">￥{{rateAmountType.price.substring(1, rateAmountType.price.substring(1, rateAmountType.price.length))  * (1 + carDetailData.agent.rate * 0.01)}}</div>
                  <div v-if="!carDetailData.agent.rate" class="price current-price">{{rateAmountType.price}}</div>
                </a>
              </div>

            </div>

            <div v-if="carSearch.type === 'ARRIVEPAY'">
              <a href="javascript:void(0);" class="price-item">
                <div class="title">官方零售价：</div>
                <div class="price ">{{vehiclePrices[vehicleCore.uuid].currency_symbol}}{{Math.ceil(vehiclePrices[vehicleCore.uuid].destination_price)}}.00</div>
              </a>
              <a href="javascript:void(0);" class="price-item">
                <div class="title">{{rateAmountType.name}}：</div>
                <div class="price current-price">{{rateAmountType.price}}</div>
              </a>
            </div>

          </div>
        </div>
      </div>
      <form class="order-form">
        <input type="hidden" name="">
        <div class="form-group form-item">
          <div class="item-label">
            价格包含：
          </div>
          <div class="item-control">
            <span class="option" v-for="i in vehicleCore.fees" :key="i.id" v-if="i.included_in_rate"><i class="iconfont icon-check"></i>{{i.description}}</span>
            <span v-if="carDetailData.set">
              <span class="option" v-for="(val, name, index) in carDetailData.set.content_map" :key="index"><i class="iconfont icon-check"></i>{{val}}</span>
            </span>
          </div>
        </div>
        <div class="form-group form-item">
          <div class="item-label">
            价格不含：
          </div>
          <div class="item-control">
            <div class="font-blod">(以下费用不计入总价，需在门店另行支付)</div>
            <div v-for="vc in vehicleCore.vehicle_charges" :key="vc.id" v-if="!vc.tax_inclusive && vc.purpose === '2'">
              <i class="iconfont icon-wrong" style="margin-right: 5px;color: #d81e06; font-size: 24px; vertical-align: middle;"></i>{{vc.description}} ( {{vc.currency_code}} {{vc.amount}} )
            </div>
            <div v-for="ui in vehicleCore.fees" :key="ui.id" v-if="!ui.included_in_rate">
              <i class="iconfont icon-wrong" style="margin-right: 5px;color: #d81e06; font-size: 24px; vertical-align: middle;"></i>{{ui.description}} ( {{ui.currency_code}} {{ui.amount}} )
            </div>
          </div>
        </div>
        <div class="form-group form-item">
          <div class="item-label">
            增值服务：
          </div>
          <div class="item-control" v-if="carDetailData.locationDetail !== undefined">
            <div class="font-blod">(以下费用不计入总价，需在门店另行支付)</div>

            <div class="checkbox" :key="index" v-for="(se, index) in carDetailData.locationDetail.special_equipments" v-if="carDetailData.specialEquipments[se.type]">
              <label>
                <input type="checkbox" :value="se.type" v-model="form.specialEquipments">
                {{carDetailData.specialEquipments[se.type].chinese_name}} {{se.other_price ? '(' + se.other_price + ')' : ''}}
              </label>
            </div>

          </div>
        </div>
        <div class="form-group form-item clearfix">
          <div class="item-label">
            主驾人：
          </div>
          <div class="item-control driver-info row" style="font-size: 14px;">
            <div class="col-3">
              <div class="input-layout" :class="{ haserrors:errors.has('firstName') }" >
                <label>* 姓氏(拼音)：</label>
                <input type="text" class="form-control" name="firstName" v-validate.disable ="'required|alpha'" data-vv-as="姓氏" style="text-transform: uppercase;" v-model="form.firstName">
                <p class="errors" v-show="errors.has('firstName')" v-cloak>{{ errors.first('firstName') }}</p>
              </div>
            </div>
            <div class="col-3">
              <div class="input-layout" :class="{haserrors:errors.has('lastName')}">
                <label>* 名字(拼音)：</label>
                <input type="text" class="form-control" name="lastName" v-validate.disable ="'required|alpha'" data-vv-as="名字" style="text-transform: uppercase;" v-model="form.lastName">
                <p class="errors" v-show="errors.has('lastName')" v-cloak>{{ errors.first('lastName') }}</p>
              </div>
            </div>
            <div class="col-3">
              <div class="input-layout" :class="{haserrors:errors.has('userPhone')}">
                <label>* 手机号：</label>
                <input type="tel" style="width: 68%;" class="form-control" name="userPhone" v-validate.disable ="'required|phone'" data-vv-as="手机号" v-model="form.userPhone">
                <p class="errors" v-show="errors.has('userPhone')" v-cloak>{{ errors.first('userPhone') }}</p>
              </div>
            </div>
            <div class="col-3">
              <div class="input-layout" :class="{haserrors:errors.has('userEmail')}">
                <label>* 邮箱：</label>
                <input type="email" style="width: 74%;" class="form-control" v-validate.disable ="'required|email'" name="userEmail" data-vv-as="邮箱" v-model="form.userEmail">
                <p class="errors" v-show="errors.has('userEmail')" v-cloak>{{ errors.first('userEmail') }}</p>
              </div>
            </div>
            <div class="col-3">
              <div class="input-layout" :class="{haserrors:errors.has('driveAge')}">
                <label>* 年龄：</label>
                <input type="text" class="form-control" v-validate.disable ="'required|numeric'" name="driveAge" data-vv-as="年龄" v-model="form.driveAge" readonly>
                <p class="errors" v-show="errors.has('driveAge')" v-cloak>{{ errors.first('driveAge') }}</p>
              </div>
            </div>
            <div class="col-3">
              <div class="input-layout" :class="{haserrors:errors.has('airportNumber')}">
                <label>航班号：</label>
                <input type="text" class="form-control" v-validate.disable ="'airportNumber'" name="airportNumber" data-vv-as="航班号" v-model="form.airportNumber">
                <p class="errors" v-show="errors.has('airportNumber')" v-cloak>{{ errors.first('airportNumber') }}</p>
              </div>
            </div>
            <div>
          </div>

          </div>
        </div>
        <div class="col-12 text-center" style="margin-top: 10px;">
<!--          <router-link :to="{name: 'order-paid', params:{carDetailData: carDetailData, form: form}}" class="btn ft-btn order-btn" style="width: 100px;">即刻下单</router-link>-->
          <button type="button" @click="goBlack" class="btn ft-btn order-btn" style="width: 100px;">上一步</button>
          <button type="button" @click="submitOrder" class="btn ft-btn order-btn" style="width: 100px;">下一步</button>
        </div>
      </form>
    </div>
  </div>
</template>
<script src="./product-detail.js"></script>
<style>
  .current-price {
    font-weight: bold;
    color: #b39364 !important;
  }

  .order-form .driver-info .haserrors {
    border-color: #f00;
  }

  .order-form .input-layout .errors {
    position: absolute;
    bottom: 0;
    left: 0;
    right: -10%;
    margin-bottom: -20px;
    color: #f00;
  }

</style>
